<template>
  <div>
    <div class="my-div" @mousedown="arrowMove">
      <!-- <p>1111111</p> -->
      <!-- <div>222</div> -->
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  created() {
    this.log("ceshi", "自定义")
  },
  mounted() {

  },
  methods: {
    arrowMove(e) {
      // 元素大小
      let elW = e.currentTarget.offsetWidth
      let elH = e.currentTarget.offsetHeight
      // 元素位置
      let elL = e.currentTarget.offsetLeft
      let elT = e.currentTarget.offsetTop
      // 鼠标位置
      let x = e.clientX
      let y = e.clientY
      // 窗口大小
      let w = window.innerWidth
      let h = window.innerHeight
      // 鼠标到元素左边距离
      let moveX = x - elL
      let moveY = y - elT
      let el = e.currentTarget
      console.log("w", w);
      console.log("h", h);
      console.log("elW", elW);
      console.log("elH", elH);
      document.onmousemove = function (e) {
        // el.style.right = w - (e.clientX - moveX) - elW + 'px'
        // el.style.bottom = h - (e.clientY - moveY) - elH + 'px'
        let right = w - (e.clientX - moveX) - elW
        let bottom = h - (e.clientY - moveY) - elH
        console.log("right", right)
        console.log("bottom", bottom)
        if(right < 0) {
          right = '0px'
        }
        if(bottom < 0) {
          bottom = '0px'
        }
        if(right > (w - elW)) {
          right = w - elW;
        }
        if(bottom > (h - elH)) {
          bottom = h - elH
        }

        el.style.right = right + 'px'
        el.style.bottom = bottom + 'px'
        
        
      }
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
      }
    },

  },
}
</script>

<style scoped>
.my-div {
  width: 200px;
  height: 200px;
  background-color: #003f88;
  border-radius: 10px;
  padding: 5px;
  position: absolute;
  z-index: 10;
}
</style>